<template>
    <NavTop/>  
    <div class="container">
        <div class="row">
            <div class="image-container">
                <el-image
                    style="width: 380px; height: 500px"
                    :src="list.img"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="list.bigImg"
                    :initial-index="4"
                    title="单击图片"
                   
                    
                />   
            </div>
            
            <div class="info-container">
                商品名称：{{ list.name }}<br>
                商品介绍：{{ list.dis }}
                <h1>商品价格：￥{{ list.price }}</h1><br>
                配送地址：<el-row>
                    <el-col :span="18">
                        <el-cascader
                            v-model="selectedAddress"
                            :options="addressOptions"
                            :props="addressProps"
                            clearable
                            placeholder="请选择省市县"
                        />
                    </el-col>
                </el-row>有货支持
59元免基础运费|可配送全球|不爱吃包退|萌宝安心尝
破损包退换|7天价保|效期无忧|供应商售后

                <br>
                <div class="quantity-container">
                    商品数量：<el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                </div><br>
                <div class="action-buttons">
                    <button @click="addToCart">加入购物车</button>
                    <button @click="buyNow">立即购买</button>
                </div>
            </div>
        </div>
        <div class="reviews-container">
            <el-collapse v-model="activeNames" accordion>
                <el-collapse-item name="1">
                    <template #title>
                        商品评价
                    </template>
                    <el-form ref="evaluationForm" :model="evaluation">
                        <el-form-item label="评分">
                            <el-rate v-model="evaluation.score" :max="5"></el-rate>
                        </el-form-item>
                        <el-form-item label="评价内容">
                            <el-input v-model="evaluation.content" type="textarea"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitEvaluation">提交评价</el-button>
                        </el-form-item>
                    </el-form>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template #title>
                        查看评价
                    </template>
                    <div v-for="(review, index) in reviews" :key="index">
                        <p>用户评分: {{ review.score }}</p>
                        <p>评价内容: {{ review.content }}</p>
                        <hr>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>

import NavTop from '@/components/NavTop.vue';
import axios from 'axios';



export default {

    components:{

        NavTop

    },

    mounted() {

        this.list=this.$route.query;
        axios.get('goodslist.json').then(res => {
        const goodslistData = res.data.goodslist;
        // 根据路由传递的商品id等信息，从goodslistData中找到当前商品的数据
        const currentGoodsId = this.$route.query.id; // 假设路由传递参数中有id字段用于标识商品，按实际调整
        const currentGoods = goodslistData.find(item => item.id === currentGoodsId);
        if (currentGoods) {
            this.list = currentGoods;
            console.log('商品数据获取成功：', this.list);
            // 如果需要多图展示，将多图数据赋值给对应的属性（假设多图字段为moreImg）
            this.list.bigImg = currentGoods.bigImg || [];
        }
    }).catch(error => {
        console.error(error);
    });




        this.evaluation = {

            score: 0,

            content: ''

        };

        this.activeNames = [];

        this.reviews = JSON.parse(sessionStorage.getItem('reviews')) || [];

    },

    data() {

        return {

            list:[],

            num:1,

            evaluation: {},

            activeNames: [],

            reviews: [],
            selectedAddress: '', 
            customAddress: '',// 用于绑定下拉菜单选择的值
            addressOptions: [
                {
                    label: "浙江省",
                    value: "110000",
                    children: [
                        {
                            value: '110100',
                            label: '丽水市',
                            children: [
                                {
                                    value: '110101',
                                    label: '遂昌县'
                                },
                                {
                                    value: '110102',
                                    label: '莲都区'
                                },
                                
                                // 更多区、县数据
                            ],
                            
                            
                        },
                        {
                            value: '110100',
                            label: '丽水市',
                            children: [
                                {
                                    value: '110101',
                                    label: '遂昌县'
                                },
                                {
                                    value: '110102',
                                    label: '莲都区'
                                },
                                
                                // 更多区、县数据
                            ],
                            
                            
                        },
                        {
                            value: '110100',
                            label: '丽水市',
                            children: [
                                {
                                    value: '110101',
                                    label: '遂昌县'
                                },
                                {
                                    value: '110102',
                                    label: '莲都区'
                                },
                                
                                // 更多区、县数据
                            ],
                            
                            
                        },
                        // 其他市辖区、县等数据
                    ]
                },
                {
                    label: "江西省",
                    value: "310000",
                    children: [
                        {
                            value: '110100',
                            label: '南昌市',
                            children: [
                                {
                                    value: '110101',
                                    label: '遂昌县'
                                },
                                {
                                    value: '110102',
                                    label: '莲都区'
                                },
                                
                                // 更多区、县数据
                            ],
                            
                            
                        },
                        // 其他市辖区、县等数据
                    ]
                    
                },
                {
                    label: "重庆市",
                    value: "440100",
                    children: [
                        {
                            value: '110100',
                            label: '江北区',
                            children: [
                                {
                                    value: '110101',
                                    label: '育才中学'
                                },
                                {
                                    value: '110102',
                                    label: '莲都区'
                                },
                                
                                // 更多区、县数据
                            ],
                            
                            
                        },
                        // 其他市辖区、县等数据
                    ]
                }
                // 这里可以根据实际需要添加更多的配送地址选项数据
            ]

        }

    },

    methods: {

        handleChange(value) {

            console.log(value);

        },
        

        addToCart() {

            // 从 sessionStorage 中获取购物车数据，如果没有则初始化为空数组

            let cartData = JSON.parse(sessionStorage.getItem('cart')) || [];

            // 查找购物车中是否已存在当前商品

            let existingItemIndex = cartData.findIndex(item => item.id === this.list.id);

            if (existingItemIndex > -1) {

                // 若存在，更新商品数量

                cartData[existingItemIndex].num += this.num;

                cartData[existingItemIndex].total = cartData[existingItemIndex].onlineprice * cartData[existingItemIndex].num;

            } else {

                // 若不存在，添加新商品信息到购物车

                cartData.push({

                    id: this.list.id,

                    name: this.list.name,

                    price:this.list.price,

                    onlineprice:this.list.onlineprice,

    

                    num: this.num,

                    total: this.list.onlineprice * this.num



                });

            }

            // 将更新后的购物车数据存回 sessionStorage

            sessionStorage.setItem('cart', JSON.stringify(cartData));

            // 可添加一些反馈信息，如使用 Element-Plus 的消息提示组件

            this.$message.success('商品已加入购物车');

        },

        submitEvaluation() {
            if (this.evaluation.content) {
                this.reviews.push({...this.evaluation });
                sessionStorage.setItem('reviews', JSON.stringify(this.reviews));
                // 清空表单
                this.evaluation.score = 0;
                this.evaluation.content = '';
                this.$message.success('评价已提交');
            } else {
                this.$message.warning('请输入评价内容');
            }
        },

        buyNow() {
            const orderDataStr = sessionStorage.getItem('order');
            let orderData = orderDataStr? JSON.parse(orderDataStr) : [];
            // 新的订单对象
            const newOrder = {
                orderID: Date.now().toString(),
                time: new Date().toISOString(),
                item: {
                    id: this.list.id,
                },
                child: [
                    {
                        id: this.list.id,
                        name: this.list.name,
                        onlineprice: this.list.onlineprice,
                        num: this.num,
                        total:this.num*this.list.onlineprice
                    }
                ],
                num: this.num,
                sum: this.list.onlineprice * this.num
            };
            let found = false;
            for (let i = 0; i < orderData.length; i++) {
                if (orderData[i].item.id === newOrder.item.id) {
                    // 相同商品叠加
                    orderData[i].num += newOrder.num;
                    orderData[i].sum += newOrder.sum;
                    // 更新 child 中的 num 和 total
                    for (let j = 0; j < orderData[i].child.length; j++) {
                        if (orderData[i].child[j].id === newOrder.child[0].id) {
                            orderData[i].child[j].num += newOrder.child[0].num;
                            orderData[i].child[j].total += newOrder.child[0].total;
                        }
                    }
                    found = true;
                    break;
                }
            }
            if (!found) {
                orderData.push(newOrder);
            }
            sessionStorage.setItem('order', JSON.stringify(orderData));
            this.$message.success('购买成功');
        }


    },
        
            
            }
        
    
    







</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    height: 90vh; /* 高度设置为100%的视口高度 */
    background-image: url(''); /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-position: center; /* 背景图片居中显示 */
    font-size: 16px; /* 设置全局字体大小 */
}

.row {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 子元素之间的间距 */
    width: 80%; /* 设置宽度为视口宽度的80% */
    max-width: 1200px; /* 最大宽度限制 */
    margin-bottom: 20px; /* 与下部分的间距 */
}



.info-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    font-size: 18px; /* 增大信息容器字体大小 */
    color: orange; /* 将信息容器字体颜色设置为橙色，除了价格 */
}

.reviews-container {
    width: 100%; /* 设置宽度为视口宽度的80% */
    max-width: 1200px; /* 最大宽度限制 */
    padding: 20px;
    font-size: 18px; /* 增大评价容器字体大小 */
    color: orange; /* 将评价容器字体颜色设置为橙色 */
}

:deep(.el-image-viewer__wrapper) img {
    width: 20%; /* 图片宽度100% */
    height: auto; /* 高度自动 */
    object-fit: cover;
}

h1 {
    color: #f90707; /* 保持标题颜色不变 */
    font-size: 24px; /* 增大标题字体大小 */
}
.action-buttons {
    display: flex; /* 使用Flexbox布局 */
    justify-content: flex-start; /* 将按钮靠左对齐 */
    gap: 20px; /* 在按钮之间添加间距 */
    margin-top: 20px; /* 与上方元素的间距 */
}
.info-container button {
    background-color: #f3474a; /* 购买按钮默认背景色 */
    border: none;
    color: white;
    padding: 20px 20px; /* 增大按钮内边距 */
    border-radius: 5px; /* 增大按钮圆角 */
    cursor: pointer;
    font-size: 30px; /* 增大按钮字体大小 */
    transition: background-color 0.3s; /* 添加背景色变换效果 */
}

/* 设置加入购物车按钮背景色为橙色 */
.info-container button:first-child {
    background-color: orange; /* 加入购物车按钮背景色 */
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 30px; /* 增大按钮字体大小 */
    
}

/* 设置购买按钮背景色为红色 */
.info-container button:last-child {
    background-color: red; /* 购买按钮背景色 */
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 30px; /* 增大按钮字体大小 */
}

.el-form-item__label { /* 增大表单标签字体大小 */
    font-size: 18px;
    color: orange; /* 将表单标签字体颜色设置为橙色 */
}
</style>